<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive :exclude="$store.state.exclude">
        <router-view v-wechat-title="$route.name" class="child-view"/>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import { login, register } from '@/api'
import { setToken } from '@/api/request'
import Cookies from 'js-cookie'
export default {
  name: 'app',
  data() {
    return {
      transitionName: ''
    }
  },
  created() {
    window.vue = this
    this.inputBug()
    // this.login()
    // Cookies.set('token', 'asdfasdfadfasdfdsaafsdfadfsaf')
    // Cookies.remove('token')
    let token = Cookies.get('token')
    if (token) {
      this.$store.commit('token', token)
      // console.log(this.$store.state.token)
    } else {
      this.login()
    }
    // register({
    //   wechat: 'xiaozhi',
    //   password: 'xiaozhi'
    // })
  },
  methods: {
    inputBug() {
      document.body.addEventListener('focusout', () => window.scrollTo(0, 0))
    },
    login() {
      login({
        wechat: 'xiaozhi',
        password: 'xiaozhi'
      }).then(res => {
        localStorage.setItem('userID', res.userInfo.userID)
        Cookies.set('token', res.token, { expires: 0.02 })
        this.$store.commit('token', res.token)
        setToken(res.token)
        // window.location.reload()
      })
    },
    reload() {
      Cookies.remove('token')
      window.location.reload()
    },
    pageLoading() {
      this.$toast.loading({
        duration: 250,
        className: 'pageLoad'
      })
    }
  },
  watch: {
    $route(to, from) {
      if (to.meta.level === from.meta.level) {
        this.transitionName = ''
      } else if (to.meta.level > from.meta.level) {
        this.transitionName = 'slide-left'
        this.pageLoading()
      } else {
        this.transitionName = 'slide-right'
      }
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">

// 页面切换效果
.child-view {
  transition: transform 0.25s ease-in-out;
}

.slide-left-enter, .slide-right-leave-active {
  /* opacity: 0; */
  transform: translate3d(100vw, 0, 0);
  z-index: 99999;
}

.slide-left-leave-active, .slide-right-enter {
  /* opacity: 0; */
  transform: translate3d(-100vw, 0, 0);
  z-index: 99
}

.van-toast.pageLoad
  width 40px
  min-height 40px
  padding 5px
  background rgba(100,100,100,0.5)
  .van-loading
    margin 5px 0 0
</style>
